import React, { Component } from 'react'
import { Cascader } from 'antd'
export default class MyCascader extends Component{
  state = {
    options1: [
      {
        label: 'label1',
        value: 'value1',
        children: [
          {
            label: 'label11',
            value: 'value11'
          },
          {
            label: 'label12',
            value: 'value12'
          }
        ]
      },
      {
        label: 'label2',
        value: 'value2'
      }
    ],
    options2:  [
      {
        label: 'label1',
        value: 'value1',
        isLeaf: false
      },
      {
        label: 'label2',
        value: 'value2',
        isLeaf: false
      }
    ]
  }
  onChange1 = value => {
    console.log(value)
  }
  onChange2 = (value, selectedOptions) => {
    console.log(value, selectedOptions)
  }
  loadData = selectedOptions => {
    const [option]  = selectedOptions.slice(-1)
    option.loading = true
    setTimeout(() => {
      option.loading = false
      option.children = [
        {
          label: 'label11',
          value: 'value11'
        },
        {
          label: 'label22',
          value: 'value22'
        }
      ]
      this.setState({ options2: [...this.state.options2] })
    }, 1000)
  }
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Cascader options={this.state.options1} onChange={this.onChange1}></Cascader>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">load data</div>
          <div className="box-body">
            <div className="box-content">
              <Cascader options={this.state.options2} changeOnSelect loadData={this.loadData} onChange={this.onChange2}></Cascader>
            </div>
          </div>
        </div>
      </>
    )
  }
}